<template>
  <div class="admin-dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">数据概览</h1>
        <p class="welcome-subtitle">
          欢迎回来，{{ currentUser?.userName || '管理员' }}！
          这里是系统的实时数据概览
        </p>
      </div>
      <div class="welcome-time">
        <div class="current-time">{{ currentTime }}</div>
        <div class="current-date">{{ currentDate }}</div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card user-card">
        <div class="stat-header">
          <div class="stat-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="stat-trend up">
            <el-icon><ArrowUp /></el-icon>
            +5.2%
          </div>
        </div>
        <div class="stat-body">
          <div class="stat-number">{{ stats.totalUsers }}</div>
          <div class="stat-label">总用户数</div>
          <div class="stat-description">本月新增 {{ Math.floor(stats.totalUsers * 0.12) }} 位用户</div>
        </div>
      </div>

      <div class="stat-card session-card">
        <div class="stat-header">
          <div class="stat-icon">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="stat-trend up">
            <el-icon><ArrowUp /></el-icon>
            +8.1%
          </div>
        </div>
        <div class="stat-body">
          <div class="stat-number">{{ stats.totalSessions }}</div>
          <div class="stat-label">活跃会话</div>
          <div class="stat-description">当前在线用户会话数</div>
        </div>
      </div>

      <div class="stat-card active-card">
        <div class="stat-header">
          <div class="stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-trend up">
            <el-icon><ArrowUp /></el-icon>
            +3.7%
          </div>
        </div>
        <div class="stat-body">
          <div class="stat-number">{{ stats.activeUsers }}</div>
          <div class="stat-label">活跃用户</div>
          <div class="stat-description">近7天活跃用户数量</div>
        </div>
      </div>

      <div class="stat-card growth-card">
        <div class="stat-header">
          <div class="stat-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-trend up">
            <el-icon><ArrowUp /></el-icon>
            +{{ stats.growthRate }}%
          </div>
        </div>
        <div class="stat-body">
          <div class="stat-number">{{ stats.growthRate }}%</div>
          <div class="stat-label">月增长率</div>
          <div class="stat-description">相比上月增长情况</div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <!-- 快速操作 -->
      <div class="quick-actions-card">
        <div class="section-header">
          <h3>快速操作</h3>
          <span class="section-subtitle">常用管理功能</span>
        </div>
        <div class="action-buttons">
          <div class="action-button" @click="manageUsers">
            <div class="action-icon users">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">用户管理</div>
              <div class="action-desc">管理系统用户</div>
            </div>
            <el-icon class="action-arrow"><ArrowRight /></el-icon>
          </div>
          
          <div class="action-button" @click="viewUserStats">
            <div class="action-icon stats">
              <el-icon><DataLine /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">用户统计</div>
              <div class="action-desc">查看用户数据</div>
            </div>
            <el-icon class="action-arrow"><ArrowRight /></el-icon>
          </div>
          
          <div class="action-button" @click="viewReports">
            <div class="action-icon reports">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">数据报告</div>
              <div class="action-desc">查看详细报告</div>
            </div>
            <el-icon class="action-arrow"><ArrowRight /></el-icon>
          </div>
          
          <div class="action-button" @click="systemSettings">
            <div class="action-icon settings">
              <el-icon><Setting /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">系统设置</div>
              <div class="action-desc">配置系统参数</div>
            </div>
            <el-icon class="action-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="recent-activities-card">
        <div class="section-header">
          <h3>最近活动</h3>
          <el-button type="text" @click="viewAllActivities">查看全部</el-button>
        </div>
        <div class="activity-list">
          <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
            <div class="activity-icon" :class="activity.type">
              <el-icon><component :is="activity.icon" /></el-icon>
            </div>
            <div class="activity-content">
              <div class="activity-text">{{ activity.text }}</div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
            <div class="activity-status" :class="activity.status">
              {{ activity.statusText }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../stores/user'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  Monitor,
  Clock,
  TrendCharts,
  DataAnalysis,
  DataLine,
  Setting,
  ArrowUp,
  ArrowRight
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 计算属性
const currentUser = computed(() => userStore.currentUser)

// 时间相关
const currentTime = ref('')
const currentDate = ref('')

// 统计数据
const stats = reactive({
  totalUsers: 1258,
  totalSessions: 156,
  activeUsers: 389,
  growthRate: 12.5
})

// 最近活动数据
const recentActivities = ref([
  {
    id: 1,
    icon: UserFilled,
    text: '新用户 "张三" 注册了账户',
    time: '2分钟前',
    type: 'user',
    status: 'success',
    statusText: '成功'
  },
  {
    id: 2,
    icon: Monitor,
    text: '用户 "李四" 登录了系统',
    time: '5分钟前',
    type: 'login',
    status: 'success',
    statusText: '已登录'
  },
  {
    id: 3,
    icon: UserFilled,
    text: '用户 "王五" 更新了个人资料',
    time: '10分钟前',
    type: 'update',
    status: 'info',
    statusText: '已更新'
  },
  {
    id: 4,
    icon: Setting,
    text: '管理员修改了系统设置',
    time: '15分钟前',
    type: 'system',
    status: 'warning',
    statusText: '已修改'
  },
  {
    id: 5,
    icon: UserFilled,
    text: '用户 "赵六" 注销了账户',
    time: '30分钟前',
    type: 'delete',
    status: 'danger',
    statusText: '已注销'
  }
])

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit'
  })
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

let timeInterval: ReturnType<typeof setInterval>

// 方法
const manageUsers = () => {
  router.push('/admin/users')
}

const viewUserStats = () => {
  ElMessage.info('用户统计功能开发中...')
}

const viewReports = () => {
  ElMessage.info('报告功能开发中...')
}

const systemSettings = () => {
  ElMessage.info('系统设置功能开发中...')
}

const viewAllActivities = () => {
  ElMessage.info('活动详情功能开发中...')
}

// 生命周期
onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  console.log('管理仪表板加载完成')
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.admin-dashboard {
  min-height: 100vh;
  background: transparent;
}

/* 欢迎区域 */
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(45deg, #ffffff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.6;
}

.welcome-time {
  text-align: right;
}

.current-time {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.current-date {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-gradient);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.user-card {
  --card-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.session-card {
  --card-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.active-card {
  --card-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.growth-card {
  --card-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-gradient);
  color: white;
  font-size: 24px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.stat-trend.up {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
}

.stat-description {
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.4;
}

/* 内容区域 */
.content-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.quick-actions-card,
.recent-activities-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.section-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.section-subtitle {
  font-size: 14px;
  color: #6b7280;
}

/* 快速操作 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.action-button:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
  transform: translateX(4px);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.action-icon.users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-icon.stats {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-icon.reports {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.action-icon.settings {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}

.action-desc {
  font-size: 14px;
  color: #6b7280;
}

.action-arrow {
  color: #9ca3af;
  transition: all 0.3s ease;
}

.action-button:hover .action-arrow {
  color: #6b7280;
  transform: translateX(4px);
}

/* 最近活动 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #f9fafb;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #f3f4f6;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.activity-icon.user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.activity-icon.login {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.activity-icon.update {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.activity-icon.system {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.activity-icon.delete {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
  line-height: 1.4;
}

.activity-time {
  font-size: 12px;
  color: #9ca3af;
}

.activity-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.activity-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.activity-status.info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.activity-status.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.activity-status.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .welcome-title {
    font-size: 28px;
  }
  
  .current-time {
    font-size: 28px;
  }
  
  .stat-number {
    font-size: 28px;
  }
  
  .quick-actions-card,
  .recent-activities-card {
    padding: 20px;
  }
}

/* 滚动条样式 */
.activity-list::-webkit-scrollbar {
  width: 6px;
}

.activity-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.activity-list::-webkit-scrollbar-track {
  background: transparent;
}
</style>